<template>
  <div>
    <div class="shadowBox"></div>
    
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column fixed prop="orderTime" label="创建时间" width="180" />
      <el-table-column prop="info.name" label="姓名" width="100" />
      <el-table-column prop="info.phone" label="电话" width="120" />
      <el-table-column prop="info.area" label="所在地区" width="200" />
      <el-table-column prop="info.address" label="详情地址" width="150" />
      <el-table-column prop="productsText" label="商品详情" width="200" />
      <el-table-column prop="totalPrice" label="商品总价" width="120">
        <template #default="scope">
          <div style="color: rgb(255, 100 ,0);">
           ￥{{scope.row.totalPrice}} 元
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="orderFlag" label="订单状态" width="120">
        <template #default="scope">
          <div :style="{ color: scope.row.orderFlag ? 'green' : 'red' }">
            {{transitionFlagText(scope.row.orderFlag)}}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="订单操作" width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="orderDetail(scope.$index)">查看订单</el-button>
          <!-- <el-button link type="primary" size="small">Edit</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <el-drawer v-model="drawerFlag" size="80%" title="订单详情">
      <!-- <div>{{tableData[flagId]}}</div> -->
      <!-- 用户信息 -->
      <el-descriptions
        class="margin-top"
        :column="3"
        size="large"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              用户名
            </div>
          </template>
          {{tableData[flagId].info.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              电话
            </div>
          </template>
          {{tableData[flagId].info.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              地区
            </div>
          </template>
          {{tableData[flagId].info.area}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <office-building />
              </el-icon>
              详情地址
            </div>
          </template>
          {{tableData[flagId].info.area}}{{tableData[flagId].info.address}}
        </el-descriptions-item>
      </el-descriptions>

      <el-divider>
        商品详情
      </el-divider>

      <!-- 商品信息 -->
      <div class="productsBox">
        <template v-for="(v, k) in tableData[flagId].products" :key="k">
          <div class="productsItem">
            <el-image style="width: 150px; height: 150px" :src="v.cover" fit="cover" />
            <div class="productsItemDetail">
              <div>商品名称：{{v.name}}</div>
              <div>购买数量：{{v.theNum}}</div>
              <div>商品价格：{{v.totalPrice}}</div>
            </div>
          </div>
        </template>
      </div>

      <el-divider>
        交易详情
      </el-divider>

      <el-descriptions
        class="margin-top"
        :column="1"
        size="large"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              订单号
            </div>
          </template>
          {{tableData[flagId].orderTimeStamp}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              交易总价格
            </div>
          </template>
          <span style="color: rgb(255, 100, 0)">￥{{tableData[flagId].totalPrice}}</span>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              订单完成状态
            </div>
          </template>
          <div v-if="tableData[flagId].orderFlag" style="color: green">订单已完成</div>
          <div v-else class="submitOrder">订单未完成 <el-button type="success" plain @click="submitOrder(tableData[flagId].id)">确认订单完成</el-button></div>
        </el-descriptions-item>
      </el-descriptions>

    </el-drawer>
  </div>

  <div class="limitBox">
    <el-pagination
      @current-change="handleCurrentChange"
      background 
      :current-page="nowLimit"
      :pager-count="5" 
      layout="prev, pager, next" 
      :total="nowTotal"
    />
  </div>
  
  </template>

<script>
  import {ref, computed} from 'vue';
  import {request} from '../network/request';
  import {ElMessageBox, ElMessage} from 'element-plus';

  export default {
    setup() {
      const nowLimit = ref(1);
      const nowTotal = ref(0);
      const offset = ref(0);
      const size = ref(10);
      const flagId = ref(0);
      const tableData = ref([]);
      const drawerFlag = ref(false);

      const getAllOrderData = () => {
        request({
          // url: '/api/order/getAllOrder',
          url: '/order/getAllOrder',
          method: 'get',
          params: {
            offset: offset.value,
            size: size.value
          }
        }).then(res => {
          tableData.value = [];
          const {result, total} = res;
          // console.log(result);
          // console.log(offset.value);
          // console.log(size.value);
          nowTotal.value = total;
          for (let k in result) {
            let productsText = '';
            let nowProduct = JSON.parse(result[k].products);
  
            for(let k in nowProduct) {
              productsText += `商品：${nowProduct[k].name}，数量：${nowProduct[k].theNum};`;
            }
  
            tableData.value.push({
              id: result[k].id,
              info: JSON.parse(result[k].info),
              productsText,
              products: JSON.parse(result[k].products),
              totalPrice: result[k].totalPrice,
              orderFlag: JSON.parse(result[k].orderFlag),
              orderTime: result[k].orderTime,
              orderTimeStamp: result[k].orderTimeStamp,
            })
          }
        })
      }

      getAllOrderData();

      const handleCurrentChange = data => {
        nowLimit.value = data;
        if (data == 1) {
          offset.value = 0;
        } else {
          offset.value += (data - 1) * 10;
        }
        getAllOrderData();
      }

      const orderDetail = (val) =>  {
        drawerFlag.value = true;
        flagId.value = val;
      }

      const submitOrder = (id) => {
        ElMessageBox.confirm('是否确认订单已完成？')
          .then(() => {
            request({
              // url: '/api/order/changeOrderFlag',
              url: '/order/changeOrderFlag',
              method: 'get',
              params: {
                id
              }
            }).then(res => {
              if (res == 'success') {
                ElMessage({
                  type: 'success',
                  message: '完成订单！',
                })
                location.reload();
              }
            })
            done();
          }).catch(() => {})
      }

      const transitionFlagText = computed(() => {
        return flag => {
          let orderFlagText = '';
          if (flag) {
            orderFlagText = '已完成';
          } else {
            orderFlagText = '未完成';
          }

          return orderFlagText;
        }
      })
      
      return {
        nowLimit,
        nowTotal,
        flagId,
        tableData,
        drawerFlag,
        handleCurrentChange,
        getAllOrderData,
        orderDetail,
        submitOrder,
        transitionFlagText,
      }
    }
  }

</script>

<style scoped>
.shadowBox {
  width: 100%;
  height: 58px;
}
.productsBox {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}
.productsItem {
  width: 50%;
  height: auto;
  font-size: 1.2em;
  background-color: #eee;
  display: flex;
  margin-bottom: 10px;
}
.productsItemDetail {
  margin-left: 30px;
  padding-top: 10px;
}
.submitOrder {
  color: red;
  display: flex;
  justify-content: space-between;
}
.limitBox {
  width: auto;
  height: 34px;
  display: flex;
  justify-content: center;
  margin: auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -700px;
  z-index: 9;
}
</style>